<template>
  <div class="country-select">
    <div class="country-select__action" :class="seletActive ? 'country-select__action--active' : ''" @click="clickSelect">
      <div class="country-select__value-container">
        <svg id="ico-checkbox-component-24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
          class="country-select__checkmark-icon" data-gtm-vis-recent-on-screen8991807_1844="2581"
          data-gtm-vis-first-on-screen8991807_1844="2581" data-gtm-vis-total-visible-time8991807_1844="100"
          data-gtm-vis-has-fired8991807_1844="1">
          <path
            d="M9,18a1,1,0,0,1-.71-.29l-4-4a1,1,0,0,1,1.42-1.42L9,15.59l9.29-9.3a1,1,0,1,1,1.42,1.42l-10,10A1,1,0,0,1,9,18Z">
          </path>
        </svg>
        <span>{{ selectLable }}</span>
      </div>
      <div class="country-select__dropdown-indicator">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down"
          class="svg-inline--fa fa-chevron-down fa-w-14 country-select__indicator-icon" role="img"
          xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path fill="currentColor"
            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
          </path>
        </svg>
      </div>
    </div>
    <div v-if="seletActive" class="country-select-content" v-click-outside="onClickOutside">
      <div class="country-select-content-input">
        <el-input v-model="searchText" placeholder="Search for an available country" size="large" @input="filterSelect">
          <template #suffix>
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search"
              class="select-search-form__btn-submit-icon" role="img" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">
              </path>
            </svg>
          </template>
        </el-input>
      </div>
      <div v-if="selectData.length > 0" v-for="item of selectData" :key="item.id" class="country-select-content-item"
        :class="selectValue === item.countryCode ? 'country-select-content-item-active' : ''" @click="selectChange(item)">
        {{ item.country }} {{ item.hasMultipleLanguages ? `(${item.language})` : '' }}
      </div>
      <div v-if="selectData.length === 0" class="country-select-content-item">No Result Found</div>
    </div>
  </div>
</template>
<script setup>
import { ClickOutside as vClickOutside } from "element-plus";
let seletActive = ref(false);
let selectValue = ref("en-US");
let selectLable = ref("United States");
let searchText = ref("");
const rootSelectData = [
  {
    id: "1",
    country: "Africa",
    countryCode: "en-ZA",
    hasMultipleLanguages: true,
    language: "en-ZA",
  },
  {
    id: "2",
    country: "Africa",
    countryCode: "fr-ZA",
    hasMultipleLanguages: true,
    language: "fr-ZA",
  },
  {
    id: "3",
    country: "Australia-New Zealand",
    countryCode: "en-AU",
    hasMultipleLanguages: false,
    language: "en-AU",
  },
  {
    id: "4",
    country: "Austria",
    countryCode: "AT",
    hasMultipleLanguages: false,
  },
  {
    id: "5",
    country: "Belgium",
    countryCode: "BE",
    hasMultipleLanguages: true,
    language: "Dutch",
  },
  {
    id: "6",
    country: "Belgium",
    countryCode: "BE",
    hasMultipleLanguages: true,
    language: "French",
  },
  {
    id: "7",
    country: "Brazil",
    countryCode: "pt-BR",
    hasMultipleLanguages: false,
    language: "pt-BR",
  },
  {
    id: "8",
    country: "Canada",
    countryCode: "en-CA",
    hasMultipleLanguages: true,
    language: "en-CA",
  },
  {
    id: "9",
    country: "Canada",
    countryCode: "fr-CA",
    hasMultipleLanguages: true,
    language: "fr-CA",
  },
  {
    id: "10",
    country: "China",
    countryCode: "zh-CN",
    hasMultipleLanguages: false,
    language: "zh-CN",
  },
  {
    id: "11",
    country: "Denmark",
    countryCode: "da-DK",
    hasMultipleLanguages: false,
    language: "da-DK",
  },
  {
    id: "12",
    country: "Finland",
    countryCode: "fi-FI",
    hasMultipleLanguages: false,
    language: "fi-FI",
  },
  {
    id: "13",
    country: "France",
    countryCode: "fr-FR",
    hasMultipleLanguages: false,
    language: "fr-FR",
  },
  {
    id: "14",
    country: "United States",
    countryCode: "en-US",
    hasMultipleLanguages: false,
    language: "en-US",
  }]
let selectData = ref(rootSelectData);
function selectChange(item) {
  selectValue.value = item.countryCode
  selectLable.value = item.hasMultipleLanguages ? item.country + `(${item.language})` : item.country
}
function clickSelect() {
  seletActive.value = true;
}
function filterSelect() {
  selectData.value = []
  for (const item of rootSelectData) {
    if (item.country.includes(searchText.value) || (item.hasMultipleLanguages && item.language.includes(searchText.value))) {
      selectData.value.push(item)
    }
  }
} 
const onClickOutside = () => {
  seletActive.value = false;
};
</script>
<style lang="scss" scoped>
.country-select {
  flex: 1;
  position: relative;
}

.country-select__action {
  height: 44px;
  border: 1px solid #c7c8cf;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #ffff;
  border-radius: 4px;
  box-shadow: none;
  outline-offset: -2px;
  outline: none;
  padding: 1px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.35s ease-in-out;

  &:focus {
    outline: 3px solid #ffffff !important;
  }

  &:hover:not([disabled]) {
    border-color: #6022a6;
  }
}

.country-select__value-container {
  color: #222222;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 96%;
  position: relative;
  max-width: 307px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding-left: 1rem;
  text-align: left;
  outline: 1px solid transparent;
  outline-offset: -2px;
}

.country-select__checkmark-icon {
  margin-right: 32px;
  margin-left: 2px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.country-select__dropdown-indicator {
  transition: transform 0.2s ease;
  margin-right: 0.5rem;
  display: flex;
  box-sizing: border-box;
  padding: 0.5rem;
  cursor: pointer;
  color: #6022a6;

  svg {
    width: 13px;
    height: 13px;
    fill: #ffffff;
    display: inline-block;
    line-height: 1;
    stroke: currentcolor;
    stroke-width: 0;
  }
}

.country-select__action--active {
  .country-select__dropdown-indicator {
    transform: rotate(180deg);
  }
}

.select-search-form__btn-submit-icon {
  width: 22px;
  height: 22px;
  color: #5b5b67;
  display: inline-block;
}

.country-select-content {
  position: absolute;
  left: 0;
  top: 52px;
  z-index: 10000;
  background: #fbf9fd;
  border: 1px solid #5b5b67;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-height: 250px;
  overflow: auto;
}

.country-select-content-input {
  padding: 16px;
}

.country-select-content-item {
  padding: 9px 32px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #222222;
  cursor: pointer;
  overflow-x: hidden;
  flex-wrap: nowrap;
  text-overflow: ellipsis;
  position: relative;

  &:hover {
    background-color: #f4f1f8;
  }
}

.country-select-content-item-active::before {
  color: #222222;
  width: 16px;
  height: 16px;
  content: "\2713 ";
  position: absolute;
  left: 0.5em;
}</style>